<template>
   <div  class="mineAttention-box">
	<Header :headerObj = 'headerObj'></Header>
    <div v-if="historyList.length>0" class="history-content" id="history-content-box">
      <dl v-for="(v,index) of historyList" class="history-wrap" :key="index">
        <dt>{{v.time}}</dt>
        <dd v-for="(item,i) of v.info" :key="i" @click="linkLiveFormAttebtion(item)">
          <div>
            <img class="mineAttention-img" :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_134,w_250'">
          </div>
          <div class="right-box">
            <p class="h-title">{{item.title}}</p>
          </div>
        </dd>
      </dl>
    </div>
	 	<!--没有关注-->
	<div v-else class="noWatchHistory-box"></div>
	</div>
</template>
<script>
	export default {
		components:{
		},
		data() {
			return {
				historyList: [],
				getPlatform:fun.getPlatform(), //app wx
				headerObj:{
				'isShowBack':true,
				'isShowClose':false,
				'isShowMine':false,
				'fromType':'mine',
				'titleText':'观看记录',
				'color':'#27344B'
			},
			};
		},
		created() {
			this.$store.dispatch("hideNav");
			this.getHistoryList();
			this.dotNumPage() //页面打点
		},
		mounted: function() {
			this.$store.dispatch("hideNav");
			if(window.topmargin && this.$channel=='zxjtqh'){//仅app才会有window.topmargin
				fun.setBarHeight(document.getElementById('history-content-box'),window.topmargin*2,true) //历史记录列表高度
			}
		},
		methods: {
			dotNumPage() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "mineWatchHistory_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app 游客为web
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);		
			},
			//历史记录
			getHistoryList() {
				this.$http.get("/h5live/getRecordList")
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length){
								this.historyList = res.data.data
							}
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			linkLiveFormAttebtion(item) {
				this.$router.push(`/${this.$channel}/liveBack/${item.vid}?dzhPage=true`);
			}
		}
	};
</script>

<style scoped="scoped">
  .mineAttention-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .history-content {
    width: 100%;
	/* margin-top: 88px; */
    height: calc(100vh - 88px);
    padding-bottom: 60px;
    overflow-y: scroll;
  }
	.noWatchHistory-box{
		width: 689px;
		height: 389px;
		background: url(../../assets/images/noWatchhistory.png) no-repeat;
		background-size: 689px 389px;
		position: absolute;
		top: 350px; 
		left:calc((100% - 689px)/2)
	}
	.history-wrap dd:not(:last-child) {
		border-bottom: 2px solid #F3F3F3;
	}
	.mineCollect-box-title {
		position: relative;
	}
	.back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
	}
	.mineCollect-box-title p {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
	.history-wrap dt {
		background: #F4F4F4;
		color: #0C0C0C;
		font-size: 30px;
		height: 60px;
		line-height: 60px;
		padding-left: 30px;
	}
	
	.history-wrap dd {
		display: flex;
		padding: 15px 0;
		width: 690px;
		margin-left: 30px;
	}
	
	.mineAttention-img {
		width: 250px;
		height: 134px;
		border-radius: 10px;
	}
	.right-box {
		margin-left: 30px;
	}
	
	.h-title {
		width: 400px;
		height: 135px;
		font-size: 28px;
		color: #0c0c0c;
		padding-top: 50px;
	}
</style>